<script lang="ts">
    import { onMount } from 'svelte';
    import { goto } from '$app/navigation';
    import { TweenLite } from 'gsap';
  
    let canvas;
    let width, height;
    let points = [];
    let target = { x: 0, y: 0 };
    let animateHeader = true;
  
    onMount(() => {
      document.body.classList.add('fade-in');
      initHeader();
      initAnimation();
      addListeners();
  
      return () => {
        window.removeEventListener('mousemove', mouseMove);
        window.removeEventListener('scroll', scrollCheck);
        window.removeEventListener('resize', resize);
      };
    });
  
    function initHeader() {
      width = window.innerWidth;
      height = window.innerHeight;
      target = { x: width / 2, y: height / 2 };
  
      canvas.width = width;
      canvas.height = height;
  
      for (let x = 0; x < width; x += width / 20) {
        for (let y = 0; y < height; y += height / 20) {
          let px = x + Math.random() * width / 20;
          let py = y + Math.random() * height / 20;
          let p = { x: px, originX: px, y: py, originY: py };
          points.push(p);
        }
      }
  
      for (let p1 of points) {
        let closest = [];
        for (let p2 of points) {
          if (p1 !== p2) {
            let placed = false;
            for (let k = 0; k < 5; k++) {
              if (!placed) {
                if (!closest[k]) {
                  closest[k] = p2;
                  placed = true;
                }
              }
            }
  
            for (let k = 0; k < 5; k++) {
              if (!placed && getDistance(p1, p2) < getDistance(p1, closest[k])) {
                closest[k] = p2;
                placed = true;
              }
            }
          }
        }
        p1.closest = closest;
      }
  
      for (let p of points) {
        p.circle = new Circle(p, 2 + Math.random() * 2, 'rgba(255,255,255,0.3)');
      }
    }
  
    function addListeners() {
      window.addEventListener('mousemove', mouseMove);
      window.addEventListener('scroll', scrollCheck);
      window.addEventListener('resize', resize);
    }
  
    function mouseMove(e) {
      let posx = e.pageX || e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      let posy = e.pageY || e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
      target.x = posx;
      target.y = posy;
    }
  
    function scrollCheck() {
      if (document.body.scrollTop > height) animateHeader = false;
      else animateHeader = true;
    }
  
    function resize() {
      width = window.innerWidth;
      height = window.innerHeight;
      canvas.width = width;
      canvas.height = height;
    }
  
    function initAnimation() {
      animate();
      for (let p of points) {
        shiftPoint(p);
      }
    }
  
    function animate() {
      if (animateHeader) {
        const ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, width, height);
  
        for (let p of points) {
          if (Math.abs(getDistance(target, p)) < 4000) {
            p.active = 0.3;
            p.circle.active = 0.6;
          } else if (Math.abs(getDistance(target, p)) < 20000) {
            p.active = 0.1;
            p.circle.active = 0.3;
          } else if (Math.abs(getDistance(target, p)) < 40000) {
            p.active = 0.02;
            p.circle.active = 0.1;
          } else {
            p.active = 0;
            p.circle.active = 0;
          }
  
          drawLines(p, ctx);
          p.circle.draw(ctx);
        }
      }
      requestAnimationFrame(animate);
    }
  
    function shiftPoint(p) {
      TweenLite.to(p, 1 + 1 * Math.random(), {
        x: p.originX - 50 + Math.random() * 100,
        y: p.originY - 50 + Math.random() * 100,
        ease: "Circ.easeInOut",
        onComplete: function () {
          shiftPoint(p);
        }
      });
    }
  
    function drawLines(p, ctx) {
      if (!p.active) return;
      for (let closest of p.closest) {
        ctx.beginPath();
        ctx.moveTo(p.x, p.y);
        ctx.lineTo(closest.x, closest.y);
        ctx.strokeStyle = 'rgba(156,217,249,' + p.active + ')';
        ctx.stroke();
      }
    }
  
    function Circle(pos, rad, color) {
      this.pos = pos;
      this.radius = rad;
      this.color = color;
  
      this.draw = function (ctx) {
        if (!this.active) return;
        ctx.beginPath();
        ctx.arc(this.pos.x, this.pos.y, this.radius, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'rgba(156,217,249,' + this.active + ')';
        ctx.fill();
      };
    }
  
    function getDistance(p1, p2) {
      return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
    }
  </script>
  
  <!-- Include Google Fonts link -->
  <head>
    <link href="https://fonts.font.im/css?family=Cookie|Covered+By+Your+Grace|Fredoka+One|Kaushan+Script|Permanent+Marker"  rel="stylesheet">
  </head>
  
  <style>
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #1a1a1a;
      font-family: 'Arial', sans-serif;
    }
  
    #large-header {
      position: absolute;
      width: 100%;
      height: 100%;
      background: #1a1a1a;
      z-index: 0; /* Canvas behind buttons */
    }
  
    canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0; /* Ensure canvas is behind buttons */
    }
  
    /* Title styling with Gelasio font */
    .title {
      font-size: 10rem;
      color: #fff;
      font-family: 'Covered By Your Grace', serif; /* Apply the Gelasio font */
      text-align: center;
      z-index: 2;
      position: absolute;
      top: 20%;
      width: 100%;
      animation: fadeInTitle 1s forwards;
    }
  
    @keyframes fadeInTitle {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  
    /* Button container styles */
    .button-container {
      display: flex;
      justify-content: center;
      gap: 40px;
      position: absolute;
      z-index: 2; /* Ensure buttons are on top of the canvas */
      top: 80%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      animation: fadeIn 1s forwards; /* Animation for fade-in */
    }
  
    /* Style for the buttons */
    .fade-in-button {
      background-color:rgb(115, 136, 158);
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: transform 0.3s ease-in-out;
    }
  
    .fade-in-button:hover {
      background-color: #0056b3;
      transform: scale(1.1);
    }
  
    /* Keyframe animation for fade-in */
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  
    /* When body has class 'fade-in' the buttons will fade in */
    body.fade-in .button-container {
      animation: fadeIn 1s forwards; /* Ensures fade-in happens after mount */
    }
  
    /* Image styling */
    .image {
      position: absolute;
      top: 0;
      left: 0;
      width: 70%;
      height: 20%;
      object-fit: cover;
      z-index: 3; /* Ensure the image is on top */
    }
  </style>
  
  <!-- Background Canvas -->
  <div id="large-header">
    <canvas bind:this={canvas}></canvas>
  </div>
  
  <!-- Title -->
  <div class="title">Smart Drawer</div>
  
  <!-- Button Container -->
  <div class="button-container">
    <button
      class="fade-in-button transition-transform"
      on:click={() => goto('/drawer')}
    >
      Go to Drawer
    </button>
    <button
    class="fade-in-button transition-transform"
    on:click={() => goto('/mermaid')}
    >
    Go to Mermaid
  </button>
  </div>